import { downloadUrl } from '@/utils'
import html2canvas from 'html2canvas'

export const toImage = (id: string, filename: string = 'qr-code') => {
	// ---------------------------------------------------------------------------
	document.documentElement.scrollTop = 0
	document.body.scrollTop = 0
	// 先获取你要转换为img的dom节点
	// const node = document.getElementById('mycanvas') // 传入的id名称
	const node: HTMLElement | null | any = document.getElementById(id || 'mycanvas') // 传入的id名称
	const width = node.offsetWidth // dom宽
	const height = node.offsetHeight // dom高
	const scale = 2 // 放大倍数 这个相当于清晰度 调大一点更清晰一点
	html2canvas(node, {
		width: width,
		height: height,
		backgroundColor: null, // 背景颜色 为null是透明
		dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
		scale: scale,
		X: 0,
		Y: 0,
		scrollX: -3, // 如果左边多个白边 设置该偏移-3 或者更多
		scrollY: -10,
		useCORS: true, // 是否使用CORS从服务器加载图像 !!!
		allowTaint: true // 是否允许跨域图像污染画布  !!!
	} as any)
		.then((canvas) => {
			const url = canvas.toDataURL() // 这里上面不设值cors会报错
			downloadUrl(url, `${filename}.png`)
		})
		.catch((error) => {
			console.log(error, 'error')
		})
}
